import React, { Component } from 'react'
import { Checkbox, Button } from 'antd'
import classNames from "classnames"
import './style.css'

export default class Item extends Component {

  state = {
    hover: false,//鼠标是否悬浮
  }

  onChange = e => {
    this.props.onCheck(this.props.id, e.target.checked)
  }

  handleMouse = (hover) => {
    return () => {
      this.setState({ hover: hover })
    }
  }

  onClickDelete = () => {
    this.props.onDelete(this.props.id);
  }

  render() {
    const { checked, content } = this.props
    return (
      <div className={classNames('item', { 'hover-item': this.state.hover })}
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}>
        <Checkbox checked={checked} onChange={this.onChange} >
          {content}
        </Checkbox>
        {
          this.state.hover && <Button type='danger' onClick={this.onClickDelete} className='delete'>Delete</Button>
        }
      </div>
    )
  }
}
